<template>
    <div class="songListItem">
        <!-- 顶部组件，用来展示歌单信息 -->
        <songListTop :musicTopData='playList'></songListTop>
        <!-- 歌单组件，用来展示歌单中的歌曲详情 -->
        <songListItem :songsData = songs></songListItem>
    </div>
</template>

<script>

import * as api from '@/api/getmusic'
import songListTop from '@/components/search/SongListTop.vue'
import songListItem from '@/components/search/SongLiistItem.vue'
import {mapMutations} from 'vuex'
export default {
    data(){
        return {
            playList:{creator:{}},
            songs:{}
        }
    },

   
    methods:{
        ...mapMutations(['GETSONGSDATA','GET_SONGS_DATA'])
    },

    mounted(){
        // 拿到传递的歌单id，根据id获取歌单详情数据传递给子组件渲染歌单详情
         api.getSongList(this.$route.query.id)
         .then(res => {
               this.playList =  JSON.parse(JSON.stringify(res.data.playlist))
         })  

        // 拿到传递的歌单id，根据id获取歌单中的歌曲数据传递给子组件渲染
        this.$store.dispatch('GET_SONGS_DATA',this.$route.query.id)
    },

    components:{
        songListTop,
        songListItem
    }
}
</script>

<style>

</style>